<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../  js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<link href="../css/zcss/summernote.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="../css/zcss/switchery.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/icons.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/sweetalert.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/custombox.min.css" rel="stylesheet">
<link href="../css/zcss/animate.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="../css/animate.css" rel="stylesheet" type="text/css">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<style>
.el-select .el-input {

	width: 110px;
}

.el-table .info-row {
	background: #c9e5f5;
}
</style>
</head>
<body class="fixed-left" style="height: 100%;">
	<!-- ============================================================== -->
	<!-- 右侧主体内容开始-->
	<!-- ============================================================== -->
	<div class="content-page crm" style="margin: 0;">
		<div class="content" style="margin: 0;">
			<div class="container-fluid" style="min-height: 900px;">
				<div class="row">
					<div id="idid" class="col-sm-12">
						<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
						<!----------------筛选、查询input代码开始-------------------->
						<div id="search">
							<div style="height: 50px; width: 500px; margin: 0 auto;" id="app">
								<el-input placeholder="全部数据" v-model="ruleForm.input"
									class="input-with-select"> <el-select
									v-model="ruleForm.selects" slot="prepend" clearable
									placeholder="请选择"> <el-option label="信用高"
									value="1131"></el-option> <el-option label="信用中" value="1132"></el-option>
								<el-option label="信用低" value="1133"></el-option> <el-option
									label="潜在" value="1121"></el-option> <el-option label="签约"
									value="1122"></el-option> <el-option label="重复购买" value="1123"></el-option>
								<el-option label="失效" value="1124"></el-option> </el-select> <el-button
									slot="append" icon="el-icon-search"
									@click="submitForm('ruleForm')"></el-button> </el-input>
							</div>
						</div>
						<!----------------列表-------------------->
						<div id="qlist" style="z-index: 0">
							<div id="editqlist"
								style="position: absolute; display: none; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; left: 0; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; top: 0; width: 0; &amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; #9; height: 0; z-index: 100; background-color: #D4D0C8;">
								<iframe name="editsubqlist" width="1" height="1" src="/a.html"
									frameborder="0" scrolling="no"></iframe>
							</div>
							<div class="row m-t-15 f-s-12" style="height: 35px;">
								<div class="col-sm-6"></div>
								<div class="col-sm-6 text-right" id="boxcreate">
									<el-button class="btn btn-white waves-effect waves-light"
										type="text" @click="centerDialogVisible = true"> <i
										class="fa fa-plus-circle m-r-5">新建客户</i> </el-button>
										
										
									<el-button class="btn btn-white waves-effect waves-light"
										type="text" @click="centerDialogVisible3 = true"> <i
										class="fa fa-plus-circle m-r-5">新建公海</i> </el-button>	
										
									 <a :href="'/gonghai'" ><el-button  class="btn btn-white waves-effect waves-light"
										type="text"> 公海 </el-button></a>
										
										
									<el-dialog title="新建客户" :visible.sync="centerDialogVisible"
										width="900px" center> <iframe src="/addcus"
										width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = this.contentWindow.document.body.scrollWidth"></iframe>
									</el-dialog>
									
									<span  v-if="${useid}==6">
									<el-dialog v-if="${useid}==6" title="新建公海" :visible.sync="centerDialogVisible3"
										width="900px" center> <iframe  v-if="${useid}==6" src="/addhigh"
										width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = this.contentWindow.document.body.scrollWidth"></iframe>
									</el-dialog>
									</span>	
								</div>
							</div>
						</div>
						<div class="wrapper wrapper-content animated fadeInRight">
						<div class="row">
							<div class="col-sm-4" v-for="(customer,i) in tableData">
								<div class="contact-box">								
										<div class="col-sm-4">
											<div class="text-center">
												<img alt="image" class="img-circle m-t-xs img-responsive" :src="customer.cus_img">													
												地址: <div class="m-t-xs font-bold">{{customer.ad_address}}</div>
											</div>
										</div>
										
										 <a :href="'/cusview?id=' + customer.cus_id " >
									
									
										<div class="col-sm-8">
										     <p>id: {{customer.cus_id}}</p>
										     
											<h3>
												名称: <strong> {{customer.cus_name}}</strong>
											</h3>
											<p>
												<i class="fa fa-map-marker"></i>公司名:  {{customer.cus_company}}
											</p>
											<address>
												<strong>所有者: {{customer.use_name}}</strong><br>创建时间: {{dateFormate(customer.cus_credate,1)}}<br>
												状态:{{customer.state}}<br> 
													信用度: {{customer.credit}}
											</address>
											
											
										</div>
										
										</a>
										<div class="clearfix">
										<el-button type="text"
														@click="editRow(customer.cus_id)" icon="el-icon-edit">编辑</el-button>
										</div>
								</div>

							</div>
						</div>
					</div>
						</el-form>
						<el-dialog title="客户" :visible.sync="centerDialogVisible2"
							width="900px" center> <iframe :src="FrameSrc"
							width="900px" frameborder="0" height="1500px" text-align="center"
							onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = this.contentWindow.document.body.scrollWidth"></iframe>

						</el-dialog>
					</div>
					
					<script src="js/jquery.min.js"></script>
					<script src="js/bootstrap.min.js"></script>
					<!-- 自定义js -->
					<script src="js/content.js"></script>

					<script>
                     $(document).ready(function () {
                        $('.contact-box').each(function () {
                             animationHover(this, 'pulse');
                         });
                       });
                     </script>
					<script>
				var vm = new Vue({
					el: "#idid",
					data() {
						return {
							texts: "",
							FrameSrc:"",
							centerDialogVisible: false,
							centerDialogVisible1: false,
							centerDialogVisible2: false,
							centerDialogVisible3: false,
							//表格当前页数据
			                tableData: [],
							ruleForm: {
								//搜索框
								input: '',
								//下拉条件按钮
								selects: '',
								 //默认每页数据量
				                pagesize: 5,
				              //当前页码
				                currentPage: 1,
				                //默认数据总数
				                totalCount: '',
						        }
						}
					},
					methods: {
						
						dateFormate:function(time,i) {
						    var date=new Date(time);
						    var year=date.getFullYear();
						    /* 在日期格式中，月份是从0开始的，因此要加0
						     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
						     * */
						    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
						    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
						    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
						    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
						    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
						    // 拼接
						  //  return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
						    
						    if(i == 1){
						    	return year+"-"+month+"-"+day;
						    }else{
						    	return hours+":"+minutes+":"+seconds;
						    }
						    
						},
						editRow(id){
							//console.log(document.getElementById("FrameEdit"));
							//document.getElementById("FrameEdit").src=
							this.FrameSrc="/updatecus?id="+id;
							alert(id);
							this.centerDialogVisible2 = true;
						},
						
						//从服务器读取数据
		                loadData: function(){  
		                	var iosnn=this;
		                	//post提交数据
							axios.post("/customer/TJcustomers",
								//参数转换
								Qs.stringify(this.ruleForm, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								iosnn.tableData = v.data.list;
								iosnn.ruleForm.totalCount = v.data.total;
								/* console.info(v.data); */
							}).catch(function(e) {
								alert("出错了"+e);
							});
		                },
		                handleSizeChange(val) {
		                	this.ruleForm.pagesize = val;
					        console.log( this.ruleForm.pagesize+'条');
					        this.ruleFormloadData();
					      },
					      handleCurrentChange(val) {
					    	  this.ruleForm.currentPage = val;
					        console.log(this.ruleForm.currentPage+'当前');
					        this.loadData();
					       
					      },
						submitForm(formName) {
							//验证方法
							this.$refs[formName].validate((valid) => {
								if(valid) {
									this.loadData(this.currentPage, this.pagesize);
								} else {
									console.log('error submit!!');
									return false;
								}
							});
						},
						resetForm(formName) {
							this.$refs[formName].resetFields();
						}
					},

					mounted() {
						var iosnn=this;
						//post提交数据
						axios.post("/customer/TJcustomers",
							//参数转换
							Qs.stringify(this.ruleForm, {
								arrayFormat: 'brackets'
							})		
						).then(function(v) {
							iosnn.tableData = v.data.list;
							iosnn.ruleForm.totalCount = v.data.total;
						}).catch(function(e) {
							alert("出错了aaa"+e);
						});
					}					
				});
			</script>
				</div>
				<!----------------统计-------------------->
				<div></div>
			</div>
		</div>
	</div>
</body>
<!--UTF8-->

</html>